<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>条件渲染</title>
		<script src="../../JS/vue.js"></script>
	</head>
	<body>
		<!-- 
            条件渲染：
                1、v-if
                      写法:
                          (1).v-if="表达式"
                          (2).v-else-if="表达式"
                          (3).v-else="表达式"
                  适用于: 切换频率较低的场景
                  特点: 不展示的DOM元素直接移除
                  注意: v-if可以和:v-else-if、v-else一起使用,但要求结构不能被"打断"

                 2、v-show
                       写法: v-show="表达式"
                       适用于: 切换频率较高的场景。
                       特点: 不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
                 3、备注：使用v-if的时候，元素可能无法获取到(dom)，且使用v-show一定可以获取到(dom)。     
         -->
		<div id="root">
			<h2>当前的n值是{{n}}</h2>
			<button @click="n++">点我+1</button>

			<!-- 使用v-show做条件渲染 -->
			<!-- <h2 v-show="false"> {{name}}</h2> -->
			<!-- <h2 v-show="1===1"> {{name}}</h2> -->
			<!-- 使用v-if做条件渲染 -->
			<!-- <h2 v-if="false">{{name}}</h2> -->
			<!-- <h2 v-if="1===1">{{name}}</h2> -->

			<!--v-else 和 v-else-if 中间不能打断-->
			<div v-show="n===1">Angular</div>
			<div v-show="n===2">React</div>
			<div v-show="n===3">Vue</div>
			<!-- 
                template 只能配合v-if使用
            -->
			<template v-if="n===1">
				<h2>Angular</h2>
				<h2>React</h2>
				<h2>Vue</h2>
			</template>
		</div>
		<script>
			Vue.config.productionTip = false //阻止 vue 在启动时产生提示
			const vm = new Vue({
				el: '#root',
				data: {
					name: '小莫',
					n: 0
				}
			})
		</script>
	</body>
</html>
